<template>
	<view class="auther">
		<view class="auther-form">
			<view class="auther-form__input borBot">
				<view class="label">门店名称</view>
				<input class="inps" type="text" placeholder="请输入门店名称" v-model="params.shopName">
			</view>
			<view class="auther-form__input">
				<view class="label">营业执照编号</view>
				<input class="inps" type="text" placeholder="请输入营业执照编号" v-model="params.licenseNo">
			</view>
		</view>

		<view class="auther-form">
			<view class="auther-form__input borBot">
				<view class="label">您的姓名</view>
				<input class="inps" type="text" placeholder="请输入您的姓名" v-model="params.userName">
			</view>
			<view class="auther-form__input borBot">
				<view class="label">联系电话</view>
				<input class="inps" type="text" placeholder="请输入联系电话" v-model="params.phone">
			</view>
			<view class="auther-form__input">
				<view class="label">推荐码</view>
				<input class="inps" type="text" placeholder="请输入推荐码" v-model="params.userPhone">
			</view>
		</view>

		<view class="auther-form">
			<view class="auther-form__title">营业执照照片</view>
			<view class="auther-form__upload">
				<image @click="uploadImage" v-if="params.license" class="auther-form__upload__license" mode="widthFix"
					:src="params.license"></image>
				<view class="auther-form__upload__box" v-else @click="uploadImage">
					<image class="auther-form__upload__add" mode="widthFix" :src="$imgUrl('/mine/auther/icon-add.png')">
					</image>
					营业执照照片
				</view>
			</view>
		</view>

		<view class="selectxieyi">
			<checkbox-group @change="aselect">
				<label>
					<checkbox :checked="isselect" color="#2FCC71" style="transform:scale(0.7)" />已阅读并同意
				</label>
			</checkbox-group>
			<view class="xieyi" @click="toxieyi1">《用户服务协议》</view>
			<view class="xieyi" @click="toxieyi2">《隐私政策》》</view>
		</view>

		<view class="auther-save" @click="saveAuther">立即保存</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import config from '@/config/index.js'
	export default {
		data() {
			return {
				params: {
					shopName: '',
					licenseNo: '',
					userName: '',
					phone: '',
					license: '',
					id: '',
					userPhone: ''
				}
			}
		},
		onLoad() {
			this.params.phone = uni.getStorageSync('phone')
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			...mapActions(['getUserInfo']),
			// 保存
			saveAuther() {
				if (this.params.shopName === '') {
					uni.showToast({
						title: '请输入门店名称',
						icon: 'none',
						duration: 2000,
						mask: true
					});
					return
				}
				if (this.params.licenseNo === '') {
					uni.showToast({
						title: '请输入营业执照编号',
						icon: 'none',
						duration: 2000,
						mask: true
					});
					return
				}
				if (this.params.userName === '') {
					uni.showToast({
						title: '请输入您的姓名',
						icon: 'none',
						duration: 2000,
						mask: true
					});
					return
				}
				if (this.params.phone === '') {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none',
						duration: 2000,
						mask: true
					});
					return
				}
				uni.showLoading({
					title: '上传中'
				})
				this.params.id = this.userInfo.id
				let that = this
				this.$apis.user.setAuth(this.params)
					.then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '操作成功',
								icon: 'none',
								duration: 2000,
								mask: true
							});
							that.getUserInfo()
							setTimeout(() => {
								uni.navigateBack()
							}, 2000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000,
								mask: true
							});
						}
					})
			},
			// 上传图片
			uploadImage() {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						uni.showLoading({
							title: '上传中'
						})
						uni.uploadFile({
							url: config.api + '/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: res => {
								console.info(res)
								if (res.statusCode === 200) {
									that.params.license = JSON.parse(res.data).url
									uni.hideLoading()
									uni.showToast({
										title: '上传成功',
										icon: 'none',
										duration: 2000,
										mask: true
									});
								} else {
									uni.showModal({
										title: '提示',
										content: '上传失败：' + res.data
									})
								}
							}
						})
					}
				});
			},
			toxieyi1() {
				uni.navigateTo({
					url: '/pages/mine/auther/xieyi1'
				})
			},
			toxieyi2() {
				uni.navigateTo({
					url: '/pages/mine/auther/xieyi2'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.auther {
		width: 100vw;
		min-height: 100vh;
		background: #F6F6F6;
		padding-top: 20rpx;

		.auther-form {
			padding: 0 24rpx;
			margin-bottom: 20rpx;
			background-color: #ffffff;
		}

		.auther-form__input {
			height: 108rpx;
			display: flex;
			align-items: center;

			.label {
				width: 190rpx;
				margin-right: 32rpx;
				font-size: 30rpx;
				color: #666666;
			}

			.inps {
				width: 450rpx;
				font-size: 30rpx;
				color: #333333;
			}
		}

		.borBot {
			border-bottom: 2rpx solid #F6F6F6;
		}

		.auther-form__title {
			padding: 24rpx 0;
			font-size: 30rpx;
			color: #666666;
		}

		.auther-form__upload {
			padding-bottom: 24rpx;
		}

		.auther-form__upload__box {
			width: 341rpx;
			height: 250rpx;
			background: #F9FAFC;
			border-radius: 12rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			color: #666666;
		}

		.auther-form__upload__add {
			width: 64rpx;
			height: 64rpx;
			margin-bottom: 24rpx;
		}

		.auther-form__upload__license {
			width: 341rpx;
			height: 250rpx;
		}

		.selectxieyi {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 24rpx;
			margin-left: 20rpx;

			.xieyi {
				color: #2FCC71;
				margin-right: 20rpx;
			}
		}

		.auther-save {
			width: 710rpx;
			height: 80rpx;
			background: #2FCC71;
			border-radius: 40rpx;
			margin: 0 auto;
			margin-top: 54rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>